<!--
 * @Author: Low-key 1334637865@qq.com
 * @Date: 2023-08-05 16:52:07
 * @LastEditors: Low-key 1334637865@qq.com
 * @LastEditTime: 2023-08-08 18:46:10
 * @FilePath: \pig\template_h5\src\views\layouts\layouts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :class="{'home':$route.meta.title == '线索雷达','nav-transparent':$route.meta.isTransparent}">
    <!-- <van-nav-bar
      v-if="!$route.meta.noNav"
      :title="
        $route.meta.isEdit && $route.query.id
          ? $route.meta.title1
          : $route.meta.title
      "
      fixed
      safe-area-inset-top
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon
          v-if="!$route.meta.isClose"
          @click="goBack()"
          class="bar-close"
          color="#666666"
          name="cross"
        />
        <van-icon
          v-if="$route.meta.isBack"
          @click="goBack()"
          color="#000000"
          name="arrow-left"
        />
      </template>
      <template #title>
        <div v-if="$route.meta.title1 == '线索雷达'">
            <span class="head" :class="{'active':isActive == 0}" @click="activeTab(0)">客户管理</span>
            <span class="head-center"></span>
            <span class="head head-radar" :class="{'active':isActive == 1}" @click="activeTab(1)">线索雷达</span>
        </div>
        <div v-if="$route.meta.title2 == '考勤OA'">
            <span class="head head-oa" :class="{'active':isActive == 0}" @click="activeTab(0)">客户管理</span>
            <span class="head-center"></span>
            <span class="head head-oa" :class="{'active':isActive == 2}" @click="activeTab(2)">考勤OA</span>
        </div>
        <span v-if="$route.meta.title1 != '线索雷达' && $route.meta.title2 != '考勤OA'">{{ $route.meta.title }}</span>
      </template>
    </van-nav-bar> -->
    <!-- <template #right>
        <img
          v-if="$route.meta.title === 'CRM管理' && course_url"
          @click="goHuiFu"
          class="icon-img"
          src="~@/assets/imgs/course.png"
        />
      </template> -->
    <transition name="scale-fade" mode="out-in">
      <div class="box">
        <router-view></router-view>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Layouts",
  data() {
    return {
      active: 0,
      isActive:0,
    };
  },
  computed: {
    ...mapGetters(["course_url", "access_token"])
  },
  methods: {
    goHuiFu() {
      window.location.href = `${this.course_url}?token=${this.access_token}`;
    },
    goBack() {
      this.$router.back();
    },
    onClickLeft() {},
    onClickRight() {},
    activeTab(num){
        if(this.isActive == num){
          return false;
        }
        this.isActive = num;
        if(num == 0){
          this.$router.replace({path:'/home'})
        }
        if(num == 1){
          this.$router.replace({path:'/radar'})
        }
        if (num == 2) {
          this.$router.replace({path:'/clock'})
        }
    },
  }
};
</script>

<style lang="less" scoped>
.box {
  // padding-top: 92px;
  background: #f5f5f5;
}
.bar-close {
  font-size: 24px;
}
.scale-fade-enter {
  opacity: 0.5;
  transform: scale(0.9);
}

.scale-fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.scale-fade-enter-active {
  transition: all 0.5s linear;
}
.scale-fade-leave-active {
  transition: all 0.5s linear;
}
.icon-img {
  height: 40px;
}
.head{
    font-size: 34px;
    line-height: 50px;
    font-weight: 400;
    color: #FFFFFF;
}
.head-oa{
  color: #333;
}
.head-center{
    display: inline-block;
    width: 40px;
}
.active{
    font-weight: 700;
    color: #FF6900;
}
.head-radar{
  color:#E8BE9E;
}
.is-radar{
  font-weight: 700;
  color: #E8BE9E;
}
.home{
  ::v-deep .van-nav-bar{
    background: #241A1C;
  }
  ::v-deep .van-hairline--bottom::after{
    border: none;
  }
} 
.nav-transparent{
  ::v-deep .van-nav-bar{
    background: transparent !important;
    border: none !important;
}
  ::v-deep .van-hairline--bottom::after{
    border: none;
  }
}
</style>
